<!--网页头部-->
<template>
    <div id="header">
        <div class="mfw-header" style="height: 59px">
            <div class="header-wrap clearfix" id="_j_head_nav_warper">
                <!--logo-->
                <div class="head-logo">
                    <a href="#" class="mfw-logo" title="蜂寻自由行"></a>
                </div>
                <ul class="head-nav" data-cs-t="headnav" id="_j_head_nav">
                    <li class="head-nav-index _j_head_nav_index">
                        <a href="/">首页</a>
                    </li>

                    <li class="head-nav-place _j_head_nav_mdd">
                        <a href="#" title="目的地">目的地</a>
                    </li>

                    <li class="head-nav-gonglve _j_head_nav_gonglve">
                        <a href="/introduction" title="旅游攻略">旅游攻略</a>
                    </li>

                    <li class="head-nav-sales _j_head_nav_sales head-nav-dropdown _j_sales_nav_show" id="_j_nav_sales" data-cs-p="sales" data-tab-item="去旅行">
                        <a class="drop-toggle" href="#" style="cursor: pointer;display: block;border-bottom:0 none;" data-sales-nav="去旅行">
                            <span>去旅行<i class="icon-caret-down"></i></span>
                        </a>
                        <div class="dropdown-menu dropdown-sales hide _j_sales_top" id="_j_sales_panel" style="text-align: left">
                            <ul>
                                <li>
                                    <a href="#" target="_blank">
                                        自由行<i class="i-hot">hot</i>
                                    </a>
                                </li>

                                <li>
                                    <a target="_blank" href="#">跟团游</a>
                                </li>
                                <li>
                                    <a target="_blank" href="#">当地游</a>
                                </li>
                                <li>
                                    <a target="_blank" href="#">邮轮</a>
                                </li>
                                <li>
                                    <a target="_blank" href="#">签证</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="head-nav-flight _j_head_nav_flight">
                        <a href="#" title="国内机票火车票">机票火车票</a>
                    </li>

                    <li class="head-nav-hotel _j_head_nav_hotel">
                        <a href="/hotel" title="酒店">订酒店</a>
                    </li>

                    <li class="head-nav-community _j_head_nav_community head-nav-dropdown _j_shequ_nav_show" id="_j_nav_community" data-cs-p="community" data-tab-item="社区">
                        <div class="drop-toggle"><span>社区<i class="icon-caret-down"></i></span></div>
                        <!-- 社区下拉面板 begin -->
                        <div class="dropdown-panel dropdown-community hide _j_shequ_top no-image" id="_j_community_panel">
                            <div class="panel-wrapper">
                                <ul class="nav-list clearfix">
                                    <li class="h">
                                        <a href="#" target="_blank" title="问答">问答<i class="i-hot">hot</i></a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="蜂寻周边">蜂寻周边<i class="i-new">new</i></a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="蜂首俱乐部">蜂首俱乐部</a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="结伴" data-cs-p="together">结伴</a>
                                    </li>
                                </ul>

                                <ul class="nav-list-sub clearfix">
                                    <li>
                                        <a href="#" target="_blank" title="马蜂窝旅行家">小组论坛</a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="分舵同城">分舵同城</a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="蜂寻拍卖行">蜂寻拍卖行</a>
                                    </li>

                                    <li>
                                        <a href="#" target="_blank" title="照片PK">照片PK</a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="真人兽">真人兽</a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="道具商店">道具商店</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- 社区下拉面板 end -->
                    </li>

                    <li class="head-nav-app _j_head_nav_app">
                        <a href="#" title="APP">APP</a>
                    </li>
                    <li class="head-nav-choice _j_head_nav_choice">
                        <a href="#">
                            <div class="mfwzx-logo"></div>
                        </a>
                    </li>
                </ul>

                <!--登录-->
                <div class="login-out">
                    <a href="#" class="weibo-login" title="微博登录"></a>
                    <a class="qq-login" href="#" title="QQ登录"></a>
                    <a class="weixin-login" href="#" title="微信登录"></a>
                    <div v-if="!this.logining" class="dlzc">
                        <a id="_j_showlogin" title="登录蜂寻" href="/Login">登录</a>
                        <span class="split">|</span>
                        <a href="#" title="注册帐号">注册</a>
                    </div>
                    <div v-if="this.logining" class="userout">
                        <a href="#" >用户{{username}},</a>
                        <a href="#" @click="signout"> [退出]</a>
                    </div>
                </div>

                <!--搜索框-->
                <div class="head-search">
                    <div class="head-search-wrapper" style="position: absolute;z-index: 5">
                        <div class="head-searchform">
                            <input name="q" type="text" id="_j_head_search_input" autocomplete="off">
                            <!--搜索按钮-->
                            <a role="button" href="javascript:" class="icon-search" id="_j_head_search_link"></a>
                        </div>
                    </div>
                </div>
            <!--<div data-pagelet id="pagelet-block-c0dd2a55686b3344530b42fc323d0901" class="" data-api="apps:user:pagelet:pageViewHeadInfo" data-params="{&quot;type&quot;:1}" data-async="1" data-controller="/js/pageletcommon/pageHeadUserInfoWWWNormal"></div>-->
            </div>
            <!--导航栏下边阴影-->
            <div class="shadow"></div>
        </div>

        <!-- 去旅行菜单 -->
        <div class="dropdown-bar" style="display: none;">
            <div class="content">
                <ul class="clearfix ul-dropdown-bar" id="Js_middleNav">
                    <li data-type="sales">
                        <a href="#">自由行</a>
                    </li>
                    <li data-type="freewalker">
                        <a href="#">跟团游</a>
                    </li>
                    <li data-type="localdeals">
                        <a href="#">当地游</a>
                    </li>

                    <li data-type="visa">
                        <a href="#">签证</a>
                    </li>
                    <li data-type="wifi">
                        <a href="#">全球WiFi</a>
                    </li>
                    <li data-type="cruise">
                        <a href="#">邮轮</a>
                    </li>

                </ul>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Header",
        data(){
            return{
                username:'',
                logining:''
            };
        },
        methods:{
            /*退出登录*/
            signout(){
                this.logining = false;
                //清除本地缓存
                localStorage.clear();
                //window.location.href = '/Login';
            }
        },
        //去旅行菜单
        //判断是否显示 悬浮显示下边的东东
        created:function () {
            //alert("卧槽");
            window.showBarFlag = true;
            var realPathName = location.pathname,
                // eslint-disable-next-line no-undef
                $nav = $('#Js_middleNav');
            var regExp = /localdeals|sales|insurance|activity/gi;
            var pathArr = realPathName.match(regExp);

            var firstSalesType = 0;
            if([1, 3, 34, 50, 51, 52].indexOf(window.Env.salesType) > -1) {
                firstSalesType = 3
            } else if([4, 40, 41, 42, 43, 44].indexOf(window.Env.salesType) > -1) {
                firstSalesType = 4
            } else if([6, 30, 32, 33, 35, 36].indexOf(window.Env.salesType) > -1) {
                firstSalesType = 6
            } else if([5].indexOf(window.Env.salesType) > -1) {
                firstSalesType = 5
            } else if([21, 22, 70].indexOf(window.Env.salesType) > -1) {
                firstSalesType = 21
            } else if([28, 29, 31, 99].indexOf(window.Env.salesType) > -1) {
                firstSalesType = 1
            } else {
                firstSalesType = 2
            }
            var urlSalesType = realPathName.split('-')[3];
            if(window.Env.middleNavHide) {
                // eslint-disable-next-line no-undef
                $('.dropdown-bar').hide();
                return;
            }
            if(urlSalesType == 5 || firstSalesType == 5) {
                $nav.children('[data-type="cruise"]').addClass('on');
                window.showBarFlag = false;
                // eslint-disable-next-line no-undef
                $('.dropdown-bar').show();
            } else if(urlSalesType == 21 || firstSalesType == 21) {
                $nav.children('[data-type="wifi"]').addClass('on');
                window.showBarFlag = false;
                // eslint-disable-next-line no-undef
                $('.dropdown-bar').show();
            } else if(urlSalesType == 4 || window.Env.sales_title_tag == 'visa' || firstSalesType == 4) {
                $nav.children('[data-type="visa"]').addClass('on');
                window.showBarFlag = false;
                // eslint-disable-next-line no-undef
                $('.dropdown-bar').show();
            } else if(window.Env.sales_title_tag == 'semi_self_service' || realPathName == '/sales/0-0-0-6-0-0-0-0.html?group=4' || firstSalesType == 6) {
                $nav.children('[data-type="freewalker"]').addClass('on');
                window.showBarFlag = false;
                // eslint-disable-next-line no-undef
                $('.dropdown-bar').show();
            } else if(window.Env.salesType) {
                switch(firstSalesType | 0) {
                    case 1:
                    case 3:
                        $nav.children('[data-type="sales"]').addClass('on');
                        break;
                    case 2:
                        $nav.children('[data-type="localdeals"]').addClass('on');
                        break;
                    case 30:
                    case 6:
                        $nav.children('[data-type="freewalker"]').addClass('on');
                        break;
                    default:
                        $nav.children('[data-type="localdeals"]').addClass('on');
                        break;
                }
                window.showBarFlag = false;
                // eslint-disable-next-line no-undef
                $('.dropdown-bar').show();
            } else {
                if(pathArr) {
                    if(pathArr.length == 1 && pathArr[0] != 'activity') {
                        switch(pathArr[0]) {
                            case 'localdeals':
                                $nav.children('[data-type="localdeals"]').addClass('on');
                                break;
                            case 'insurance':
                                $nav.children('[data-type="insurance"]').addClass('on');
                                break;
                            case 'sales':
                                $nav.children('[data-type="sales"]').addClass('on');
                                break;
                            case 'flight':
                                $nav.children('[data-type="flight"]').addClass('on');
                                break;
                            default:
                                break;
                        }
                        window.showBarFlag = false;
                        // eslint-disable-next-line no-undef
                        $('.dropdown-bar').show();
                    } else {
                        if('activity'.indexOf(pathArr) != -1) {
                            window.showBarFlag = true;
                            // eslint-disable-next-line no-undef
                            $('.dropdown-bar').hide();
                        }
                    }
                }
            }
            // 点击时触发
            // eslint-disable-next-line no-undef
            $('.ul-dropdown-bar > li').on('click', function() {
                // eslint-disable-next-line no-undef
                $(this).addClass('on').siblings().removeClass('on');
            });

            // eslint-disable-next-line no-undef
            if(typeof M !== "undefined" && typeof M.loadResource === "function") {
                // eslint-disable-next-line no-undef
                M.loadResource("https://js.mafengwo.net/js/cv/js+Dropdown:js+pageletcommon+pageHeadUserInfoWWWNormal:js+jquery.tmpl:js+M+module+InputListener:js+M+module+SuggestionXHR:js+M+module+DropList:js+M+module+Suggestion:js+M+module+MesSearchEvent:js+SiteSearch:js+AHeader:js+M+module+PageAdmin:js+M+module+Storage:js+M+module+Cookie:js+M+module+ResourceKeeper:js+jquery.jgrowl.min:js+AMessage:js+M+module+dialog+Layer:js+M+module+dialog+DialogBase:js+M+module+dialog+Dialog:js+M+module+dialog+alert:js+M+module+FrequencyVerifyControl:js+M+module+FrequencySystemVerify:js+ALogin:js+M+module+ScrollObserver:js+M+module+QRCode:js+AToolbar:js+ACnzzGaLog:js+ARecruit:js+ALazyLoad:js+jquery.scrollTo:js+MouseTip:js+hotel+module+Hash:js+hotel+module+ModuleProvider:js+hotel+module+ImageLoader:js+hotel+module+Album:js+hotel+module+AlbumComment:js+hotel+module+Log:js+hotel+module+FavDialog:js+hotel+mfwmap+mfwmap-util:js+hotel+mfwmap+mfwmap-event:js+hotel+mfwmap+mfwmap-runtime-google:js+hotel+mfwmap+mfwmap-runtime-amap:js+hotel+mfwmap+mfwmap-runtime-leaflet:js+hotel+mfwmap+mfwmap:js+hotel+mfwmap+mfwmap-overlays:js+hotel+module+ListTips:js+xdate:js+hotel+module+BookingDate:js+hotel+info:js+hotel+module+FestivalDateConfig:js+jquery-ui-core:js+jquery-ui-datepicker:js+hotel+module+DateRangePicker:js+hotel+module+BookingGuests:js+hotel+module+NumberGuestsPicker:js+hotel+module+BookingInfo:js+hotel+info_booking:js+M+module+Pagination:js+M+module+TopTip:js+hotel+module+ReportDialog:js+hotel+info_comment:js+hotel+pc_app_guide^YlFVSg^1584071349.js");
            }
        }
    }
</script>

<style scoped>
    .dlzc {
        position:absolute;
        top: 29%;
        right: -24px;
    }
    .userout {
        position: absolute;
        top: 35%;
        right: -160px;
    }
</style>